<template>
  <view>
    <!-- 搜索框 -->
      <view class="search-box">
        <uni-search-bar :radius='100'
        @input="input" 
        cancelButton='none'
        focus="true"></uni-search-bar>
      </view>
    <!-- /搜索框 -->
    
    <!-- 搜索建议列表 -->
        <!-- v-if="searchResults.length!==0"  如果搜索建议列表不为空展示搜索列表  否则展示搜索历史 -->
      <view class="sugg-list" v-if="searchResults.length!==0">
          <view class="sugg-item" 
          v-for="(item,i) in searchResults" 
          :key='i' 
          @click="gotoDetail(item.goods_id)">
              <view class="goods-name">{{item.goods_name}}</view>
              <uni-icons type="forward" size="17"></uni-icons>
          </view>
      </view>
    <!-- /搜索建议列表 -->
    
    <!-- 搜索历史 -->
      <view class="history-box" v-else>
            <view class="history-title">
                <text>搜索历史</text>
                <!-- 清空历史记录按钮 -->
                <uni-icons type="trash" size="17" @click="cleanHistory"></uni-icons>
            </view>
            <!-- 历史列表区域 -->
            <view class="history-list">
                <uni-tag :text="item" 
                v-for="(item,i) in historyList" 
                :key='i' 
                class="uni-tag"
                @click="gotoGoodsList(item)"></uni-tag>
            </view>
      </view>
    <!-- /搜索历史 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        //延时器的timerId
        // timer:null,
        //定义搜索关键字
          kw:'',
        //定义搜索建议列表
        searchResults:[],
        // 搜索关键词的历史记录
        historyList: ['a', 'app', 'apple']
      };
    },
    onLoad() {
      //页面加载获取Storage存储的值 赋值给历史数据列表如果没有就赋值为空数组
      this.historyList=uni.getStorageSync('kw')||[]
    },
    methods:{
      input(e){
        // 输入框的防抖,将输入与请求的高频转化为低频
        //用户每次输入后清空之前的延时器
        clearTimeout(this.timer)
        //用户每次输入500毫秒内不再输入才发起请求
        this.timer=setTimeout(()=>{
          //获取输入框输入的信息
          // console.log(e)
          this.kw=e
          //发起请求搜索建议列表的方法
          this.getSearchList()
        },500)
      },
      async getSearchList() {
            if(this.kw==='') {
              //如果搜索关键词为空  那么搜索结果列表也是空数组  并且返回
              this.searchResults=[]
              return
            }
           const {data:res} = await uni.$http.get('/api/public/v1/goods/qsearch',{query:this.kw})
           // console.log(res)
           this.searchResults=res.message
           //请求成功后调用saveSearchHistory()保存搜索关键词
           this.saveSearchHistory()
      },
      gotoDetail(goods_id) {
          // console.log(item)
          uni.navigateTo({
            // 指定详情页面的 URL 地址，并传递 goods_id 参数
            url:'/subpkg/goods_detail/goods_detail?goods_id='+goods_id
          })
      },
      //保存搜索关键词的方法
      saveSearchHistory() {
        // 先看historyList数组里面有没有跟关键词一样的  如果有那么就返回那个索引 index
         const index= this.historyList.findIndex(x=>x===this.kw)
         // 如果index大于0说明找到了有相同的并且排在后面  调用splice(index,1)  index表示要删除的那个索引 后面的数组表示删除多少项
         if(index>=0) {
           this.historyList.splice(index,1)
         }
        //unshift往数组前面追加
        this.historyList.unshift(this.kw)
        uni.setStorageSync('kw',this.historyList)
      },
      //清空搜索历史记录的方法
      cleanHistory(){
          this.historyList=[]
          uni.setStorageSync('kw',[])
      },
      // 点击搜索历史项跳转到商品列表页面
      gotoGoodsList(kw) {
          uni.navigateTo({
            url:'/subpkg/goods_list/goods_list?query='+kw
          })
      }
    }
  }
</script>

<style lang="scss">
    .search-box {
      // 设置顶部搜索框的吸顶效果
      position: sticky;
      top: 0;
      z-index: 999;
      background-color: #c00000;
    }
    .sugg-list {
        padding: 0 5px;
      .sugg-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        padding: 13px 0;
        border-bottom: 1px solid #efefef;
        .goods-name {
          //不允许换行
          white-space: nowrap;
           // 溢出部分隐藏
           overflow: hidden;
           //超出部分用...代替
           text-overflow: ellipsis;
           margin-right: 3px;
        }
      }
    }
    .history-box {
      padding: 0 5px;
      .history-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
            font-size: 13px;
            border-bottom: 1px solid #efefef;
      }
      .history-list {
        .uni-tag {
            margin-top: 5px;
                margin-right: 5px;
        }
      }
    }
</style>
